<% title t("views.dashboard.meta.title", site: community_name) %>

<div id="index-container"
  data-params="<%= params.to_json(only: %i[action per_page]) %>"
  data-which="following">
  <main id="main-content" class="crayons-layout crayons-layout--header-inside crayons-layout--2-cols">
    <%= render("header_and_action", page_title: t("views.dashboard.following_users.heading")) %>
    <div class="crayons-layout__content" id="user-dashboard">
      <% if @follows.any? %>
        <div id="following-wrapper" class="grid gap-0 s:gap-3 m:gap-4 s:grid-cols-2 l:grid-cols-3 align-left s:align-center">
          <% @follows.each do |follow| %>
            <% user = follow.followable %>
            <% if user %>
              <div class="crayons-card p-4 m:p-6 flex s:grid single-article break-word content-center" id="follows-<%= follow.id %>">
                <a href="<%= user.path %>" class="crayons-avatar crayons-avatar--2xl s:mb-2 s:mx-auto">
                  <img alt="<%= user.username %> profile image" class="crayons-avatar__image" src="<%= user.profile_image_url_for(length: 60) %>" loading="lazy" />
                </a>

                <div class="pl-4 s:pl-0 self-center">
                  <h3 class="s:mb-1 p-0">
                    <a href="<%= user.path %>">
                      <%= user.name %>
                    </a>
                  </h3>

                  <p class="s:mb-4">
                    <a href="<%= user.path %>" class="crayons-link crayons-link--secondary">
                      @<%= user.username %>
                    </a>
                  </p>
                </div>
              </div>
            <% end %>
          <% end %>
        </div>
      <% else %>
        <div class="p-9 crayons-card crayons-card--secondary align-center fs-l h-100 flex items-center justify-center">
          <%= t("views.dashboard.following_users.empty") %>
        </div>
      <% end %>
      <%= render "sublist" %>
    </div>
  </main>
</div>
